<%--
  Created by IntelliJ IDEA.
  User: ni
  Date: 2019-07-30
  Time: 9:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <style>
        table{
            border-collapse: collapse;
        }
        .form{
            width:300px;
            height:400px;
            position:fixed;
            top:20px;
            left:500px;
            z-index:1;
            border:1px solid #ddd;
            background: white;
            display: none;
        }
        .form-item{
            height: 80%;
        }
        .btns{
            height:20%;
            text-align:right;
        }
    </style>
    <script>
        function addDept() {
           var div = document.querySelector(".form");
           div.style.display = "block";
        }
        function closeForm(){
            var div = document.querySelector(".form");
            div.style.display = "none";
        }
        function editDept(e){
           var tr =  e.target.parentNode.parentNode;
           var tds = tr.getElementsByTagName("td");
            document.querySelector(".deptno").value = tds[0].innerText;
            document.querySelector(".dname").value = tds[1].innerText;
            document.querySelector(".loc").value = tds[2].innerText;
            addDept();
        }
    </script>
</head>
<body>
    <a onclick="addDept()">新增部门</a>
    <table border="1" width="100%">
        <tr>
            <th>编号</th>
            <th>部门名称</th>
            <th>部门地址</th>
            <th>操作</th>
        </tr>

        <c:forEach items="${list}" var="dept">
            <tr>
                <td>${dept.deptno}</td>
                <td>${dept.dname}</td>
                <td>${dept.loc}</td>
                <td>
                    <input type="button" value="编辑" onclick="editDept(event)"/>
                    <button>删除</button></td>
            </tr>
        </c:forEach>
    </table>
    <div class="form">
        <form method="post" action="add-dept">
            <div class="form-item">
                <p>部门名称：<input type="text" class="dname" name="dname"></p>
                <p>部门地址：<input type="text" class="loc" name="loc"></p>
                <input class="deptno" type="hidden" name="deptno"/>
            </div>
            <div class="btns">
                <input type="submit" value="保存">
                <input type="button" value="取消" onclick="closeForm()">
            </div>
        </form>
    </div>
</body>
</html>
